<template>
    <div class="basic_manage_span">
        <table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :size-change="handleSizeChange" 
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
                <div class="search_item_span search_item_fix_width">
                    <el-select v-model="generatorCondition.database" placeholder="请选择数据库"
                        size="default" clearable>
                        <el-option
                            v-for="item in databaseList"
                            :key="item.databaseName"
                            :label="item.databaseName"
                            :value="item.databaseName">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="generatorCondition.tableName"
                        placeholder="请输入表名称" clearable></el-input>
                </div>
                <div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
                <el-table :data="tabelData.records" size="default" height="100%" style="width: 100%;">
                    <el-table-column
                        align="center"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="tableName"
                        label="表的名称"
                        width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="tableDescription"
                        label="表的描述"
                        min-width="240">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="240">
                        <template #default="scope">
                            <el-button size="small" type="success"
                                @click="showGeneratorDialog(scope.$index, scope.row)">生成代码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog
            title="代码生成"
            v-model="generatorDialogOption.isShow"
            @close="generatorDialogClose"
            :before-close="generatorDialogBeforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="450px">
            <el-form ref="generatorFormRef" :model="generatorForm" :rules="generatorRules" label-width="100px" size="default">
                <el-form-item label="数据库名称" prop="databaseName">
                    <el-input v-model="generatorForm.databaseName" placeholder="请选择数据库" disabled ></el-input>
                </el-form-item>
                <el-form-item label="表名称" prop="tableName">
                    <el-input v-model="generatorForm.tableName" placeholder="请选择数据表" disabled ></el-input>
                </el-form-item>
                <el-form-item label="包名称" prop="packageName">
                    <el-input v-model="generatorForm.packageName" placeholder="请填写包名称" clearable ></el-input>
                </el-form-item>
                <el-form-item label="模块名称" prop="modelName">
                    <el-input v-model="generatorForm.modelName" placeholder="请填写模块名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="作者名称" prop="author">
                    <el-input v-model="generatorForm.author" placeholder="请填写作者名称" clearable></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button size="default" @click="dialogCancel">取 消</el-button>
                <el-button size="default" type="primary" @click="generatorDialogSave">下载</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    import TableSpan from '@/components/table-span.vue';
    import {tool} from "@/js/tool.js";
    import { ElMessage } from 'element-plus'

    export default {
        name: "generator",
        data: function(){
            return {
                btOption: {
                    
                },
                tabelData: {
                    total: 0,
                    size: 10,
                    current: 1,
                    records: []
                },
                databaseList: [],
                generatorCondition: {
                    database: "",
                    tableName: "",
                },
                generatorDialogOption: {
                    isShow: false
                },
                generatorForm: {
                    databaseName: "",
                    tableName: "",
                    packageName: "",
                    modelName: "",
                    author: ""
                },
                generatorRules: {
                    databaseName : [
                        { required: true, message: '请选择数据库', trigger: 'blur' }
                    ],
                    tableName : [
                        { required: true, message: '请选择数据表', trigger: 'blur' }
                    ],
                    packageName : [
                        { required: true, message: '请填写包名称', trigger: 'blur' }
                    ],
                    modelName : [
                        { required: true, message: '请填写模块名称', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            searchData: function(){
                getTableList(this);
            },
            handleSizeChange: function(val){

            },
            handleCurrentChange: function(val){

            },
            showGeneratorDialog: function(index,row){
                this.generatorForm.databaseName = this.generatorCondition.database;
                this.generatorForm.tableName = row.tableName;
                this.generatorDialogOption.isShow = true;
            },
            generatorDialogClose: function(){
                this.generatorForm = {
                    databaseName: "",
                    tableName: "",
                    packageName: "",
                    modelName: "",
                    author: ""
                }
                this.$refs["generatorFormRef"].clearValidate();
            },
            generatorDialogBeforeClose: function(){
                dialogCloseTips(this);
            },
            dialogCancel: function(){
                dialogCloseTips(this);
            },
            generatorDialogSave: function(){
                var obj = this;
                this.$refs["generatorFormRef"].validate(function(valid){
                    if (valid) {
                        getGenerator(obj);
                    } else {
                        return false;
                    }
                });
            }
        },
        created: function(){
            getDatabaseList(this);
        },
        components: {
            TableSpan
        }
    }

    /**
     * 获取数据库实例列表
     * @param app app对象
     */
     function getDatabaseList(app){
        const url = "/basic/generation/getDatabaseList";
        tool.formJsonRequest(url,{},null,function(data){
            if(data.code === "0000"){
                app.databaseList = data.data;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 获取数据库表
     * @param app app对象
     */
     function getTableList(app){
        const param = {
            databaseName: app.generatorCondition.database,
            tableName: app.generatorCondition.tableName
        }
        const url = "/basic/generation/getTableList";
        tool.formJsonRequest(url, param, null, function(data){
            if(data.code === "0000"){
                app.tabelData.records = data.data;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 获取数据库表
     * @param app app对象
     */
     function getGenerator(app){
        const param = app.generatorForm;
        const url = "/basic/generation/createGeneration";
        new tool.formJsonRequestStream(url, param, null, function(data){
            let blob = new Blob([data.data],{type: "application/zip"});
            const objectUrl = window.URL.createObjectURL(blob);
            const elink = document.createElement('a');
            elink.download = app.generatorForm.modelName + '.zip'; //下载文件名称,
            elink.style.display = 'none';
            elink.href = objectUrl;
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
            window.URL.revokeObjectURL(elink.href);

            app.generatorDialogOption.isShow = false;
        });
    }

    /**
     * 关闭dialog的提示信息
     * @param app
     */
    function dialogCloseTips(app) {
        var confirmMessage = "是否放弃代码生成？";
        var obj = app;
        app.$confirm(confirmMessage).then(function(){
            obj.generatorDialogOption.isShow = false;
        }).catch(function(){});
    }
</script>
<style>
    .basic_manage_span{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        flex-wrap : wrap;
    }
    .search_item_span{
        max-width: 190px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .search_item_fix_width{
        width: 190px;
    }
</style>